<style lang="scss">
	@import '@/assets/css/variable';
	
	.popTitle {
		text-align: center;
		padding: 18px 0;
		font-size: 1.6rem;
		color: #666666;
	}

	.orderList {
		width: 100%;
		background-color: $main-bgc-gray;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		overflow: hidden;
		flex: 1;
		.van-field__label{
			display: flex;
			align-items: center;
			width: 70px !important;
		}
		
	}
	.orderListList {
		padding: 0 1rem 1rem 1rem;
		$paddingSize: 0.8rem;
		$paddingSize-s: 0.4rem;
		overflow-y: scroll;
	
		.item {
			margin-top: 10px;
			padding: 1rem 1rem 0 1rem;
			background-color: white;
			margin-bottom: 1rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-radius: 0.8rem;
			border-bottom: 1px solid $border-c;
	
			.line1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				// padding: 0 $paddingSize;
				.line1Left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
	
					.name {
						flex: 1;
						font-size: 1.3rem;
						color: $color1;
						line-height: 1.3em;
					}
	
					.flag {
						flex: 0 0 50px;
					}
	
					span {
						img {
							width: 30px;
							height: 30px;
						}
					}
				}
	
				.line1Right {
					flex: 2;
	
					&.time {
						color: $color3;
					}
				}
			}
	
			.line2 {
				margin-top: 4px;
	
				// padding: $paddingSize-s $paddingSize;
				&.title {
					color: $color2;
					line-height: 1.2em;
					font-size: 1.2rem;
				}
	
				&.time {
					color: $color2;
				}
			}
	
			.line4 {
				padding: $paddingSize-s 0 $paddingSize 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
	
			.line3 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $color2;
				border-top: 1px solid $border-c;
				padding: $paddingSize 0;
			}
			
			.line5 {
				display: flex;
				flex-direction: column;
				color: $color2;
				padding: $paddingSize 0;
				border-top: 1px solid $border-c;
				.title{
					color:$color1;
					font-size: 14px;
				}
			}
		}
	}
</style>
<template>
	<div class="orderList">
		<van-search v-model="value" show-action label="核销码" placeholder="请输入核销码" @search="onSearch">
			<template #action>
				<div @click="onSearch">搜索</div>
			</template>
		</van-search>
		<van-tabs v-model="active" @click="onClickTabs" sticky line-width="50" title-active-color="#335FFC"
			color="#335FFC">
			<van-tab v-for="item in tabList" :key="item.id" :title="item.name">
				<van-list @load="getOrderPage" v-model="load[active].loading" :finished="load[active].finished"
					finished-text="没有更多了" offset="200">
					<div class="orderListList">
						<div class="item" v-for="item in orderList[active]" :key="item.id">
							<div class="line1">
								<div class="line1Left">
									<div class="name ellipsis">{{item.product_name}}</div>
									<div class="tag">
										<van-tag class="margL-m" :color="item.is_type == 1?'#66CC99':'#FF6666'">
											{{item.is_type == 1?'快递':'到店'}}
										</van-tag>
									</div>
								</div>
							</div>
							<div class="line2 title">
								价格:{{item.price}}￥ 数量:{{item.num}} 总金额:{{item.price*item.num}}
							</div>
							<div class="line2 time">下单时间:{{item.createtime}}</div>
							<div class="line4">
								<div>
									<van-tag v-if="item.status!=3&&item.status!=4" class="margR-m"
										:type="item.writeoff==2?'primary':'danger'">{{item.writeoff==2?'已核销':'未核销'}}
									</van-tag>
									<van-tag :color="$myUtils.getColor(item.status)">{{item.statusname}}</van-tag>
								</div>
								<div>
									<van-button style="width: 70px;" type="info" size="mini"
										v-if="item.writeoff==1&&item.status!=4" @click="verificationBtn(item,'mu')">
										手动核销
									</van-button>
									<van-button style="width: 50px;" type="default" size="mini" v-if="item.status!=4&&item.writeoff==1&&item.is_refund!=2"
										@click="backOrderBtn(item)">
										退单
									</van-button>
								</div>
							</div>
							<div class="line3" @click="openPopEvent(item)" v-if="item.is_type == 2">
								<span>订单明细</span>
								<van-icon name="arrow" class="icon" color="#999" size="1.6rem" />
							</div>
							<div class="line5" @click="openPopEvent(item)" v-if="item.is_type == 1">
								<div class="title">收件信息</div>
								<div class="margT-m">
									<div>
										收件人:{{JSON.parse(item.val).contacts}} 手机号:{{JSON.parse(item.val).mobile}}
									</div>
									<div class="margT-m">
										收件地址:{{JSON.parse(item.val).address}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</van-tab>
		</van-tabs>
		<van-dialog v-model="showVerificationDialog" title="核销窗口" show-cancel-button @confirm="verificationEvent">
			<div style="display: flex;align-items: center;">
				<van-field v-model="writeoff_code" label="核销码" placeholder="请输入核销码">
					<template #button>
					    <van-button size="small" type="primary" @click="getCode">获取核销码</van-button>
					  </template>
				</van-field>
			</div>
			<!-- <van-button type="primary">核销</van-button> -->
		</van-dialog>
		<van-popup v-model="showPop" closeable close-icon="close" position="bottom" :style="{ height: '90%' }">
			<div class="popTitle">订单明细</div>
			<div class="orderListList">
				<div class="item" v-for="item in ziOrderList" :key="item.id">
					<div class="line1">
						<div class="line1Left">
							<span class="type ellipsis">{{item.product_name}}</span>
							<van-tag class="margL-m" :color="item.is_type == 1?'#66CC99':'#FF6666'">
								{{item.is_type == 1?'快递':'到店自提'}}
							</van-tag>
						</div>
					</div>
					<div class="line2 title">
						价格:{{item.price}}￥ 数量:{{item.num}} 总金额:{{item.price*item.num}}
					</div>
					<!-- <div class="line2 time">下单时间:{{item.createtime}}</div> -->
					<div class="line4">
						<div>
							<van-tag v-if="item.status!=3&&item.status!=4" :type="item.writeoff==2?'primary':'danger'">
								{{item.writeoff==2?'已核销':'未核销'}}</van-tag>
							<van-tag :class="item.status!=3&&item.status!=4?'margL-m':''"
								:color="$myUtils.getColor(item.status)">{{item.statusname}}</van-tag>
						</div>
						<div>
							<van-button style="width: 70px;" type="info" size="mini"
								v-if="item.writeoff==1&&item.status!=4" @click="verificationBtn(item,'zi')">手动核销
							</van-button>
							<van-button style="width: 50px;" type="default" size="mini"
								v-if="item.status==2&&item.is_refund!=2" @click="backOrderListBtn(item)">退单</van-button>
						</div>
					</div>
				</div>
			</div>

		</van-popup>
		<div class="tabbar-height"></div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import {
		Dialog,
		Toast
	} from 'vant';
	// import {
	// 	myMixins
	// } from "@/assets/js/mixins.js"
	export default {
		name: "orderList",
		// mixins: [myMixins],
		components: {},
		data() {
			return {
				writeoff_code: '',
				showVerificationDialog: false,
				ziOrderList: [],
				showPop: false,
				value: '',
				active: 0,
				mainColor: "#FF0000",
				tabList: [{
					id: '',
					name: "全部",
				}, {
					id: 2,
					name: "已支付"
				}, {
					id: 3,
					name: "已核销"
				}, {
					id: 4,
					name: "已退款"
				}],
				orderList: [
					[]
				],
				load: [{
						lastPageNo: 1,
						pageNo: 1,
						loading: false,
						finished: false,
					},
					{
						lastPageNo: 1,
						pageNo: 1,
						loading: false,
						finished: false,
					},
					{
						lastPageNo: 1,
						pageNo: 1,
						loading: false,
						finished: false,
					},
					{
						lastPageNo: 1,
						pageNo: 1,
						loading: false,
						finished: false,
					},
					{
						lastPageNo: 1,
						pageNo: 1,
						loading: false,
						finished: false,
					},
					{
						lastPageNo: 1,
						pageNo: 1,
						loading: false,
						finished: false,
					},
					{
						lastPageNo: 1,
						pageNo: 1,
						loading: false,
						finished: false,
					}
				],
				loading: false,
				finished: false,
				pageSize: 10,
				status: '',
				flag: 'mu',
				item:''
			}
		},
		created() {
			const _this = this;
			this.load[this.active].loading = false
			this.load[this.active].finished = false
			this.load[this.active].lastPageNo = 1
			this.load[this.active].pageNo = 1
			this.orderList[this.active] = []
			console.log("created.loading", this.load[this.active].loading)

		},
		mounted() {
			// this.load[this.active].loading = false
			// this.load[this.active].finished = false
			// this.load[this.active].pageNo = 1
			// this.orderList[this.active] = []
			// this.getOrderPage()
			console.log("mounted.loading", this.load[this.active].loading)
		},
		methods: {
			getCode() {
			  this.writeoff_code = this.item.writeoff_code
			},
			openPopEvent(item) {
				this.showPop = true
				this.item = item
				//获取子订单列表
				this.getZiOrderListPage(item.id)
			},
			getZiOrderListPage(id) {
				const params = {
					order_id: id,
					pageNo: 1,
					pageSize: 1000
				}
				this.$request.OrderlistPage(params).then(res => {
					this.ziOrderList = res.data.data
				})
			},
			onSearch() {
				this.active = 0
				this.status = ''
				this.load[this.active].loading = false
				this.load[this.active].finished = false
				this.load[this.active].lastPageNo = 1
				this.load[this.active].pageNo = 1
				this.orderList[this.active] = []
				this.getOrderPage()
			},
			verificationBtn(item, flag) {
				this.item = item;
				this.flag = flag;
				this.showVerificationDialog = true;
			},
			verificationEvent() {
				if(this.writeoff_code!=this.item.writeoff_code){
				  this.$toast('核销码不匹配')
				  return
				}
				const params = {
					id: this.item.id, //子表ID
					order_id: this.item.order_id, //母表ID
					writeoff: 2
				}
				if (this.flag == 'mu') {
					delete params.order_id
					this.$request.OrderSave(params).then(res => {
						if (res.ret == 200) {
							this.$toast('核销成功')
							this.orderList[this.active] = this.orderList[this.active].map(res => {
								if (res.id == this.item.id) {
									res.writeoff = 2
									// res.status=3
								}
								return res
							})
							this.$forceUpdate()
						}
					})
				} else {
					this.$request.OrderlistSave(params).then(res => {
						if (res.ret == 200) {
							this.$toast('核销成功')
							this.ziOrderList = this.ziOrderList.map(res => {
								if (res.id == this.item.id) {
									res.writeoff = 2
									res.status = 3
								}
								return res
							})
							this.$forceUpdate()
						}
					})
				}
				// Dialog.alert({
				//   title: '温馨提示',
				//   message: '请问是否确认核销此条记录？',
				//   closeOnClickOverlay:true
				// }).then(() => {
				//   // this.$request.OrderSave()

				// });
			},
			backOrderListBtn(item) {
				Dialog.alert({
					title: '温馨提示',
					message: '请问是否要退单？',
					closeOnClickOverlay: true
				}).then(() => {
					const params = {
						id: item.id
					}
					this.$request.OrderlistRefund(params).then(res => {
						if (res.ret == 200) {
							this.$toast('退单成功')
							//获取子订单列表
							this.getZiOrderListPage(this.item.id)
							this.ziOrderList[this.active] = this.ziOrderList[this.active].map(res => {
								console.log('res', res)
								if (res.id == item.id) {
									res.status = 4
									res.statusname="已退款"
								}
								return res
							})
							this.$forceUpdate()
							// this.getOrderPage()
						}
					})
				});
			},
			backOrderBtn(item) {
				Dialog.alert({
					title: '温馨提示',
					message: '请问是否要退单？',
					closeOnClickOverlay: true
				}).then(() => {
					const params = {
						id: item.id
					}
					this.$request.OrderRefund(params).then(res => {
						if (res.ret == 200) {
							this.$toast('退单成功')
							this.orderList[this.active] = this.orderList[this.active].map(res => {
								console.log('res', res)
								if (res.id == item.id) {
									res.status = 4
									res.statusname="已退款"
								}
								return res
							})
							this.$forceUpdate()
							// this.getOrderPage()
						}
					})
				});
			},
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
					this.status = ''
				} else if (index == 1) {
					//已经支付
					this.status = 2
				} else if (index == 2) {
					//已经核销
					this.status = 3
				} else if (index == 3) {
					//已经退款
					this.status = 4
				} else if (index == 4) {
					//已经完成
					this.status = 6
				}
				this.load[this.active].finished = false
				this.load[this.active].loading = false
				this.load[this.active].lastPageNo = 1
				this.load[this.active].pageNo = 1
				this.orderList[this.active] = []
				this.getOrderPage()
			},
			getOrderPage() {
				const _this = this;
				let params = {
					writeoff_code: this.value,
					status: this.status,
					merchant_id: localStorage.getItem('merchant_id'),
					pageNo: _this.load[_this.active].pageNo,
					pageSize: _this.pageSize
				}
				console.log("params.status", params.status)
				// if(_this.load[_this.active].pageNo>1&&_this.load[_this.active].pageNo==_this.load[_this.active].lastPageNo){
				// 	return
				// }
				_this.load[_this.active].loading = true
				_this.$request.OrderPage(params).then(res => {
					console.log("totalCount", res.data.totalCount)
					let data = (res.data && res.data.data) || []
					let list = _this.orderList[_this.active]
					list.push(...data)
					_this.orderList[_this.active] = list
					_this.load[_this.active].loading = false
					_this.load[_this.active].lastPageNo = _this.load[_this.active].pageNo
					if (this.orderList[_this.active].length == res.data.totalCount) {
						_this.load[_this.active].finished = true;
					} else {
						_this.load[_this.active].pageNo++;
					}
					this.$forceUpdate()
				}).finally(() => {
					console.log('finally')
					_this.load[_this.active].loading = false
				})
			},
		}
	};
</script>
